



<!--<template>-->
<!--  <div class="hello">-->
<!--    <div>-->
<!--      <button class="save-button" @click="screenshots()">点击保存名片</button>-->
<!--      <div class="company-card-info center-father-style-align" ref="copyCardArea" id="copyCardArea">-->
<!--        <div id="copyArea" class="copyArea" ref="copyArea">-->
<!--          <div class="company-name-short">郁结</div>-->
<!--          <div class="company-name-full">Alibaba iDST</div>-->
<!--          <div class="company-connection">-->
<!--            <div class="company-phone">-->
<!--              <div class="inline-block company-phone-text">电话：</div>-->
<!--              <div class="inline-block company-phone-number">*保密*</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div class="inline-block company-webmail-text">邮箱：</div>-->
<!--              <div class="inline-block company-webmail-number">15114584731@163.com</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <h2>下面是截图部分：</h2>-->

<!--      <div class="img-show" :style="{display: state.isDownloadImg ? 'block':'none'}">-->
<!--        <img :src="state.imgUrl" alt=""/>-->

<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import html2canvas from "html2canvas";-->
<!--export default {-->
<!--  name: 'HelloWorld',-->
<!--  data () {-->
<!--    return {-->
<!--      state: {-->
<!--        isDownloadImg: false,-->
<!--        imgUrl: ''-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    screenshots() {-->
<!--      const element = this.$refs.copyCardArea;-->

<!--      const width = element.offsetWidth;-->
<!--      const height = element.offsetHeight;-->
<!--      const canvas = document.createElement('canvas');-->
<!--      const context = canvas.getContext('2d');-->
<!--      const scale = this.getPixelRatio(context); // 定义放大倍数-->
<!--      console.log(scale)-->
<!--      canvas.width = width * scale;-->
<!--      canvas.height = height * scale;-->
<!--      context.scale(scale, scale);-->

<!--      // 关闭抗锯齿-->
<!--      context.mozImageSmoothingEnabled = false;-->
<!--      context.webkitImageSmoothingEnabled = false;-->
<!--      context.msImageSmoothingEnabled = false;-->
<!--      context.imageSmoothingEnabled = false;-->

<!--      // 将缩放样式应用到 element 上-->
<!--      element.style.transform = `scale(${1/scale})`;-->
<!--      html2canvas(element, {-->
<!--        useCORS: true,-->
<!--        canvas: canvas,-->
<!--        backgroundColor: null,-->
<!--      }).then(canvas => {-->
<!--        element.style.transform = '';-->
<!--        console.log(canvas)-->
<!--        this.state.imgUrl = canvas.toDataURL("image/png");-->
<!--        this.state.isDownloadImg = true;-->
<!--      });-->
<!--    },-->
<!--    // 获取设备像素密度的方法-->
<!--    getPixelRatio(context){-->
<!--      const backingStoreRatio = context.webkitBackingStorePixelRatio ||-->
<!--          context.mozBackingStorePixelRatio ||-->
<!--          context.msBackingStorePixelRatio ||-->
<!--          context.oBackingStorePixelRatio ||-->
<!--          context.backingStorePixelRatio || 1;-->
<!--      return  (window.devicePixelRatio || 1) / backingStoreRatio;-->
<!--    }-->

<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--:root {-->
<!--  /* 设置基础字体大小，可以根据需要调整 */-->
<!--  font-size: 16px;-->
<!--}-->

<!--.save-button {-->
<!--  padding: 0.625rem 1.25rem; /* 10px 20px */-->
<!--  margin: 0.625rem 7.5rem; /* 10px 120px */-->
<!--}-->

<!--.img-show {-->
<!--  margin-top: 1.25rem; /* 20px */-->
<!--}-->
<!--img{-->
<!--  width: 20.875rem; /* 334px */-->
<!--  height: 10.125rem; /* 162px */-->
<!--}-->
<!--.inline-block {-->
<!--  display: inline-block;-->
<!--}-->

<!--.center-father-style-align {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.company-card-info {-->
<!--  color: white;-->
<!--  width: 20.875rem; /* 334px */-->
<!--  height: 10.125rem; /* 162px */-->
<!--  border-radius: 0.3125rem; /* 5px */-->
<!--  padding: 0 1.25rem; /* 0 20px */-->
<!--  background-image: url(../assets/bgc.png);-->
<!--  background-repeat: no-repeat;-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.company-name-short {-->
<!--  font-size: 1.25rem; /* 20px */-->
<!--  margin-bottom: 0.28125rem; /* 4.5px */-->
<!--}-->

<!--.company-name-full {-->
<!--  font-size: 0.8125rem; /* 13px */-->
<!--  color: #fff;-->
<!--  opacity: 1;-->
<!--}-->

<!--.company-card-powerby-icon {-->
<!--  margin-top: 3.75rem; /* 60px */-->
<!--  padding-bottom: 1.09375rem; /* 17.5px */-->
<!--}-->

<!--.powerby-icon svg {-->
<!--  width: 7.25rem; /* 116px */-->
<!--  height: 0.78125rem; /* 12.5px */-->
<!--}-->

<!--.company-connection {-->
<!--  margin-top: 1.46875rem; /* 23.5px */-->
<!--}-->

<!--.company-phone {-->
<!--  margin-bottom: 0.125rem; /* 2px */-->
<!--}-->

<!--.cover-grey {-->
<!--  background-color: grey;-->
<!--  opacity: 0.5;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  position: fixed;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--}-->

<!--.button-inside {-->
<!--  position: fixed;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  font-size: 1.125rem; /* 18px */-->
<!--  left: 0;-->
<!--}-->

<!--.cover-button-ul {-->
<!--  border: 0.3125rem solid #fff; /* 5px */-->
<!--  border-radius: 0.3125rem; /* 5px */-->
<!--  margin: 0 1.25rem; /* 0 20px */-->
<!--}-->

<!--.cover-button-ul li {-->
<!--  border-bottom: 0.0625rem solid #D1D1D1; /* 1px */-->
<!--}-->

<!--.no-border {-->
<!--  border: 0 !important;-->
<!--}-->

<!--.cover-button {-->
<!--  background-color: #fff;-->
<!--  color: #4A4A4A;-->
<!--  width: 100%;-->
<!--  text-align: center;-->
<!--  padding: 0.625rem 0; /* 10px 0 */-->
<!--}-->

<!--.cover-button-cancel {-->
<!--  border-radius: 0.3125rem; /* 5px */-->
<!--}-->

<!--.cover-button-cancel-a,-->
<!--.cover-button-div {-->
<!--  margin: 0.9375rem 1.25rem; /* 15px 20px */-->
<!--}-->

<!--.cover-button-div {-->
<!--  background-color: #fff;-->
<!--  border-radius: 0.3125rem; /* 5px */-->
<!--  color: #4A4A4A;-->
<!--  text-align: center;-->
<!--  padding: 0.625rem 0; /* 10px 0 */-->
<!--  font-size: 1.125rem; /* 18px */-->
<!--}-->

<!--.company-webmail-text,-->
<!--.company-phone-text {-->
<!--  font-size: 0.75rem; /* 12px */-->
<!--  color: #fff;-->
<!--  opacity: 1;-->
<!--}-->

<!--.company-phone-number,-->
<!--.company-webmail-number {-->
<!--  font-size: 0.8125rem; /* 13px */-->
<!--}-->

<!--.no-phone-number-top {-->
<!--  padding-top: 1.25rem; /* 20px */-->
<!--}-->

<!--.hint-tips {-->
<!--  line-height: 3;-->
<!--}-->

<!--</style>-->

<template>
  <div class="hello">
    <div>
      <button class="save-button" @click="screenshots()">点击保存名片</button>
      <div class="company-card-info center-father-style-align" ref="copyCardArea" id="copyCardArea">
        <div id="copyArea" class="copyArea" ref="copyArea">
          <div class="company-name-short">郁结</div>
          <div class="company-name-full">Alibaba iDST</div>
          <div class="company-connection">
            <div class="company-phone">
              <div class="inline-block company-phone-text">电话：</div>
              <div class="inline-block company-phone-number">*保密*</div>
            </div>
            <div>
              <div class="inline-block company-webmail-text">邮箱：</div>
              <div class="inline-block company-webmail-number">15114584731@163.com</div>
            </div>
          </div>
        </div>
      </div>

      <h2>下面是截图部分：</h2>

      <div class="img-show" :style="{display: state.isDownloadImg ? 'block':'none'}">

        <img :src="state.imgUrl" alt="" style="width: 334px;height: 160px"/>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: 'HelloWorld',
  data () {
    return {
      state: {
        isDownloadImg: false,
        imgUrl: ''
      }
    }
  },
  methods: {
    screenshots() {
      let b64;
      html2canvas(this.$refs.copyCardArea, {
        useCORS: true,

        width:334,
        height:160
      }).then(canvas => {
        try {
          b64 = canvas.toDataURL("image/png");
        } catch (err) {

          console.log(err);
          alert(err);
        }
        this.state = {
          imgUrl: b64,
          isDownloadImg: true
        };
      });
    }
  }
}
</script>


<style scoped>
.save-button {
  padding: 10px 20px;
  margin: 10px 120px;
}

.img-show {
  margin-top: 20px;
}

.inline-block {
  display: inline-block;
}

.center-father-style-align {
  display: flex;
  align-items: center;
}



.company-card-info {
  color: white;
  width: 334px;
  height: 166px;
  border-radius: 5px;
  padding: 0 20px;
  background-image: url(../assets/bgc.png);
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.company-name-short {
  font-size: 20px;
  margin-bottom: 4.5px;
}


.company-name-full {

  font-size: 13px;
  color: #fff;
  opacity: 0.7;
}


.company-connection {
  margin-top: 23.5px;
}

.company-phone {
  margin-bottom: 2px;
}

.cover-grey {
  background-color: grey;
  opacity: 0.5;
>>>>>>> save-current-commit
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}


.button-inside {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 18px;
  left: 0;
}

.cover-button-ul {
  border: 5px solid #fff;
  border-radius: 5px;
  margin: 0 20px;
}


.cover-button-ul li {
  border-bottom: 1px solid #D1D1D1;
}

.no-border {
  border: 0 !important;
}

.cover-button {
  background-color: #fff;
  color: #4A4A4A;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}


.cover-button-cancel {

  border-radius: 5px;
}

.cover-button-cancel-a,

.cover-button-div {
  margin: 15px 20px;
}

.cover-button-div {
  background-color: #fff;
  border-radius: 5px;
  color: #4A4A4A;
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
}

.company-webmail-text,
.company-phone-text {
  font-size: 11px;
  color: #fff;
  opacity: 1;
}

.company-phone-number,
.company-webmail-number {
  font-size: 13px;
}

.no-phone-number-top {
  padding-top: 20px;
}

.hint-tips {
  line-height: 3;
}
</style>

